<template>
  <div>
    <HomeRecommendTitle :tit="`榜单`"></HomeRecommendTitle>
    <div class="n-bilst">
      <dl
        class="blk"
        v-for="(itme, index) in playlist3"
        :key="itme.id"
        :class="index === 2 ? 'blk1' : ''"
      >
        <RecommendSongList :playlistData="itme"></RecommendSongList>
      </dl>
    </div>
  </div>
</template>

<script>
import HomeRecommendTitle from "@/encapsulation/HomeRecommendTitle.vue";
import RecommendSongList from "@/pages/homePage/components/homeSonglist/RecommendSongList.vue";
import { getPlaylistFn } from "@/api/index.js";
import { reactive, shallowRef } from "vue";
export default {
  name: "HomeSongList",
  components: { HomeRecommendTitle, RecommendSongList },
  setup() {
    let playlist = reactive([]);
    let playlist3 = shallowRef([]);
    getPlaylistFn().then((response) => {
      playlist = response.data.list;
      playlist3.value = [...response.data.list.slice(0, 3)];
    });
    return {
      playlist,
      playlist3,
    };
  },
};
</script>

<style scoped lang="less">
.n-bilst {
  height: 472px;
  margin-top: 20px;
  padding-left: 1px;
  background: url("../../../../common/images/index_bill.png") no-repeat;
  .blk1 {
    width: 228px;
  }
}
.blk {
  float: left;
  width: 230px;
}
</style>
